<template>
  <div class="page">
    <!-- 顶部栏 -->
    <Base-Navbar title="我的"></Base-Navbar>

    <div class="container">
      <!-- 钱包信息 -->
      <div class="mb-10">
        <Base-Wallet-Info></Base-Wallet-Info>
      </div>

      <!-- 个人信息 -->
      <div class="box opacity flex flex mb-10">
        <div class="box opacity flex-1 flex-fs-0">
          <div>空投Lucky</div>
          <div class="cl-success fz-12 mt-5">10089</div>
        </div>

        <div class="box opacity flex-1 flex-fs-0 ml-10 mr-10">
          <div>下单总额</div>
          <div class="cl-success fz-12 mt-5">10089</div>
        </div>

        <div class="box opacity flex-1 flex-fs-0">
          <div>等级身份</div>
          <div class="cl-success fz-12 mt-5">10089</div>
        </div>
      </div>

      <!-- 我的订单 -->
      <div class="box opacity mb-10">
        <div class="title">我的订单</div>

        <!-- Tab -->
        <div>
          <Base-Tab
            :type="2"
            :disabled="true"
            :tabs="selects.orderStatus"
            :index="-1"
            @change="toOrderPage"
          ></Base-Tab>
        </div>
      </div>

      <!-- 功能列表 -->
      <div class="box opacity">
        <div class="title">功能列表</div>

        <ul>
          <li
            class="flex flex-cc flex-rb pt-10 pb-10 click"
            v-for="(v, i) in selects.menus"
            :key="i"
            @click="router.push(v.url)"
          >
            <div>{{ v.name }}</div>

            <div>
              <van-icon class="cl-black" name="arrow"></van-icon>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import selects from 'js/selects'

const router = useRouter()

// 订单列表
function toOrderPage(e) {
  const { index, value, key } = e
  router.push(`/order/index?tabIndex=${index}&tabValue=${value}&tabKey=${key}`)
}
</script>

<style lang="scss" scoped></style>
